<template>
  <div class="content pt-sm">

    <transition name="movetop">
      <div class="form-hook" v-show="!success">
        <div class="form-control icon-md-control vux-1px-b" @click="selSchool">
          <input type="text" class="theme-input" placeholder="学校" :value="school" readonly>
          <span class="tip-right">选择学校 <x-icon type="ios-arrow-right" size="16"></x-icon></span>
        </div>
        <div class="form-control icon-md-control vux-1px-b" @click="selGrade">
          <input type="text" class="theme-input" placeholder="年级" :value="grade" readonly>
          <span class="tip-right">选择年级 <x-icon type="ios-arrow-right" size="16"></x-icon></span>
        </div>
        <div class="form-control mb-sm vux-1px-b">
          <input type="text" class="theme-input" placeholder="输入班级名，例如：1班" v-model="name">
        </div>
        <button type="button" class="theme-btn" @click="sub">确定</button>
      </div>
    </transition>

    <transition name="movetop">
      <div class="success-page text-center" v-show="success">
        <div class="avatar"></div>
        <h2 class="title">班级号：60000</h2>
        <h4 class="tip">暂无学生加入</h4>
        <p class="desc">您可以将班级号告诉学生，下载“邻校英语”APP后注册登录，输入班级号即可加入班级</p>
        <a href="#/myclass" class="theme-btn w-sm">告诉学生</a>
      </div>
    </transition>

  </div>
</template>

<script>
  export default{
    data() {
      return {
        name: '',
        success: false
      };
    },
    computed: {
      school() {
        return this.$store.state.crtClassTmp.school
      },
      grade() {
        return this.$store.state.crtClassTmp.grade
      }
    },
    beforeRouteEnter(to, from, next) {
      next(vm => {
        vm.success = vm.$route.path == '/createclass/success'
      })
    },
    methods: {
      selSchool() {
        this.$router.push('/select/school')
      },
      selGrade() {
        this.$router.push('/select/grade')
      },
      sub() {
        this.$router.push('/createclass/success')
      }
    }
  }
</script>

<style lang="less">
  .tip-right {
    position: absolute;
    top: 14px;
    right: 10px;
    color: #333;
    font-size: 15px;
    vertical-align: middle;
    svg {
      vertical-align: -3px;
    }
  }
  .icon-md-control {
    input {
      padding-right: 104px;
    }
  }
  .success-page {
    .title {
      font-size: 20px;
      color: #343434;
    }
    .tip {
      font-size: 14px;
      color: #333;
      margin-bottom: 15px;
      font-weight: 400;
    }
    .desc {
      font-size: 14px;
      color: #999;
      margin-bottom: 20px;
    }
  }

  .movetop-enter-active,
  .movetop-leave-active {
    transition: all 0.2s ease-in-out;
  }
  .movetop-enter-active {
    transition-delay: 0.2s;
  }
  .movetop-enter,
  .movetop-leave-active {
    opacity: 0;
    transform: translateY(80px);
  }
</style>
